@use "lib/viewport";

.autocomplete {
  z-index: z("composer", "dropdown") + 1;
  max-width: 370px;
  min-width: 300px;
  background-color: var(--secondary);
  border: 1px solid var(--primary-low);
  box-shadow: var(--shadow-dropdown);
  border-radius: 8px;

  @include viewport.from(sm) {
    max-width: 600px;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      &:first-of-type a {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }

      &:last-of-type a {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }

      a {
        @include ellipsis;
        align-items: center;
        color: var(--primary);
        display: flex;
        gap: 0.25em;
        padding: 0.3em 1em;

        @include hover {
          background-color: var(--d-hover);
          text-decoration: none;
        }

        &.selected {
          background-color: var(--d-selected);
        }

        .avatar {
          margin-right: 0.25em;
        }

        .name {
          display: contents;
          font-size: var(--font-down-1);
          color: var(--primary-high);
        }

        .user-status-message {
          display: flex;
          align-items: center;
          gap: 0.25em;

          .user-status-message-description {
            @include ellipsis;
            font-size: var(--font-down-2);
            color: var(--primary-high);
            margin: 0;
          }
        }

        .relative-date {
          font-size: var(--font-down-3);
        }
      }

      .d-icon-users {
        color: var(--primary-medium);
        padding: 0 2px;
      }
    }
  }

  &.ac-user {
    li a {
      padding: 0.5em 1em;
    }

    .emoji {
      height: 0.75em;
      width: 0.75em;
    }
  }

  &.ac-emoji {
    li:last-of-type a {
      color: var(--primary-high);
    }

    .emoji {
      margin-right: 0.25em;
    }
  }
}
